<template>
    <div class="heade">
        <div class="pay">在线支付</div>
    </div>
    <div class="center">
        <div class="center-one">订单信息:</div>
        <div class="center-two">
            <p>
                {{ orders.business.businessName }}
                <i class="fa fa-caret-down" @click="detailetShow"></i>
            </p>
               <p>&#165; {{ orders.orderTotal }}</p>
            </div>
        </div>
         <!-- 订单明细 -->
          <ul class="order-detailet" v-show="isShowDetailet">
            <li v-for="item in orders.odList" v-bind:key="item.orderId" class="li-pay">
                <p>{{  item.food.foodName }}X{{ item.quantity }}</p>
                <p>&#165;{{ item.food.foodPrice*item.quantity }}</p>
            </li>
            <li class="li-pay">
                <p>配送费</p>
                <p>&#165;{{ orders.business.deliveryPrice }}</p>
            </li>
          </ul>
            <div class="alipay">  
                 <img src="../img/alipay.png" alt="" class="imgPay">
                 <i class="fa fa-check-circle"></i>
                </div>
            <div class="wechat">
                <img src="../img/wechat.png" alt="" class="imgPay">
                
            </div>
       
   
    <div class="bottomab" @click="pay">确认支付</div>
    <Footer></Footer>
</template>
<script>


export default{
    name: 'PayPage',
    data(){
        return {

            orderId:this.$route.query.orderId,
            orders:{
                business:{},
                
                odList:[]
            },
            isShowDetailet:false
        }
    },
    created(){
        this.$axios.post('OrdersController/getOrdersById',this.$qs.stringify({
            orderId:this.orderId
			})).then(response=>{
				this.orders = response.data;
			}).catch(error=>{
				console.error(error);
			});
        
    },
    destroyed(){
        window.onpopstate = null;
    },
    methods:{
        detailetShow(){
            this.isShowDetailet = !this.isShowDetailet;
        },
        pay(){

           this.$router.push({path:'/payQrcode',query:{total_fee:this.orders.orderTotal,orderId:this.orderId,businessName:this.orders.business.businessName}});
        }
    }
}
</script>
<style>
.pay{
    text-align: center;
    width: 100%;
    height: 90px;
    background-color: #0097ff;
    padding-top: 30px;
    font-size: 40px;
    color: #ffffff;
    margin-bottom: 20px;
}
.center-one{
    text-align: left;
    color: #999999;
    font-size: 30px;
    padding-bottom: 10px;
}
.center-two{
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
}
.location{
    font-size: 35px;
    color: #666666;
    
}
.price{
    color: #ff4500;
    font-size: 35px;
    
}
.alipay{
    
    display: flex;
    justify-content: space-between;
}
.wechat{
    display: flex;
    justify-content: space-between;
}
input{
    width: 20px;
    height: 20px;
}
.imgPay{
    height: 50px;
    width:150px;
}
.bottomab{
    background-color: #38ca73;
    height: 90px;
    width: 100%;
    margin-top: 200px;
    padding-top: 20px;
    text-align: center;
    color: #ffffff;
    font-size: 40px;
}
.li-pay{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>